<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../plugins/layui/src/css/modules/laydate/default/font.css">
    <link rel="stylesheet" href="../plugins/X-admin/css/xadmin.css">
    <script src="../plugins/layui/src/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../plugins/X-admin/js/xadmin.js"></script>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../plugins/AdminLTE/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../plugins/AdminLTE/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../plugins/AdminLTE/bower_components/morris.js/morris.css">
    <link rel="stylesheet" href="../plugins/AdminLTE/bower_components/jvectormap/jquery-jvectormap.css">
    <link rel="stylesheet"
          href="../plugins/AdminLTE/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="../plugins/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../plugins/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

    <!--<![endif]&ndash;&gt;-->
</head>
<div id="app">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12" style="padding-bottom: 30px;">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <blockquote class="layui-elem-quote">很栓Q您的到来：
                            <span class="x-red"><b style="font-size: 16px">{{userInfoPO.username}}</b></span>
                            今天是：{{rightNowTime}} {{nongli}}
                        </blockquote>
                    </div>
                </div>
            </div>

            <!--轮播图外部引入-->
            <!--<iframe src="lunbo2.html" frameBorder="0" width="640px" style="background-color: #f1f1f1" scrolling="no"-->
                    <!--height="330px"></iframe>-->

            <!--Admin-LTE-->


            <div style="position: relative;">

                <section class="content">
                    <!--本周预约数-->
                    <div class="row">
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-aqua">
                                <div class="inner">
                                    <h3>{{AllMessage}}</h3>
                                    <p><a style="font-size: 30px;color: white"
                                          href="https://s.weibo.com/top/summary/?sudaref=cn.bing.com">
                                        微博今日热搜</a>
                                    </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                                <a href="https://s.weibo.com/top/summary/?sudaref=cn.bing.com" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                        <!-- ./col -->
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-green">
                                <div class="inner">
                                    <h3>{{AllMessage}}<sup style="font-size: 20px"></sup></h3>
                                    <p><a style="font-size: 30px;color: white"
                                          href="https://tophub.today/n/x9ozB4KoXb">
                                        头条热榜</a>
                                    </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-stats-bars"></i>
                                </div>
                                <a href="https://tophub.today/n/x9ozB4KoXb" class="small-box-footer">查看更多 <i
                                        class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                        <!-- ./col -->
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-yellow">
                                <div class="inner">
                                    <h3>{{AllMessage}}</h3>

                                    <p><a style="font-size: 30px;color: white"
                                          href="https://s.weibo.com/top/summary/?sudaref=cn.bing.com">
                                        百度热搜</a>
                                    </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-person-add"></i>
                                </div>
                                <a href="https://s.weibo.com/top/summary/?sudaref=cn.bing.com" class="small-box-footer">查看更多 <i
                                        class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                        <!-- ./col -->
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-red">
                                <div class="inner">
                                    <h3>{{AllMessage}}</h3>

                                    <p><a style="font-size: 30px;color: white"
                                          href="https://s.weibo.com/top/summary/?sudaref=cn.bing.com">
                                        知乎热搜</a>
                                    </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-pie-graph"></i>
                                </div>
                                <a href="https://s.weibo.com/top/summary/?sudaref=cn.bing.com" class="small-box-footer">查看更多 <i
                                        class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <!--/ Admin-LTE-->

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">开发团队</div>
                    <div class="layui-card-body ">
                        <table class="layui-table">
                            <tbody>
                            <tr>
                                <th>版权所有</th>
                                <td>站在巨人的肩膀上</td>
                            </tr>
                            <tr>
                                <th>开发者</th>
                                <td>李宏林(1793327033@qq.com)</td>
                            </tr>
                            <tr>
                                <th>当前环境</th>
                                <td>Windows10</td>
                            </tr>
                            <tr>
                                <th>JDK版本</th>
                                <td>1.8</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <style id="welcome_style"></style>

        </div>
    </div>

</div>

<div class="control-sidebar-bg"></div>
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userInfoPO: {
                username: '李宏林',
                phone: '173****0897',
            },
            rightNowTime: new Date(),
            nongli: new Date(),
            AllMessage: '',
            drawerTab: false,
            ABC: false,
        },
        created() {
            this.localUserInfo();
            this.formatDate();
            this.getChineseDate();
        },
        methods: {
            localUserInfo() {
                //发送Ajax请求，请求获取当前登录用户的用户名
                axios.get("/user/login/localUserInfo").then((response) => {
                    if (response.data.flag) {
                        this.userInfoPO = response.data.data;
                    }
                });
            },
            formatDate() {
                var date = new Date();
                var year = date.getFullYear(),
                    month = date.getMonth() + 1,//月份是从0开始的
                    day = date.getDate(),
                    hour = date.getHours(),
                    min = date.getMinutes(),
                    sec = date.getSeconds();
                var newTime = year + '年' +
                    month + '月' +
                    day + '日 ';
                this.rightNowTime = newTime;
            },
            getChineseDate() {
                let date = new Date();
                let dateString = date.toLocaleString('zh-CN-u-ca-chinese');
                dateString = dateString.replace(/(\d+)\s*?年/, (x, y) => {
                    let result = '';
                    result = "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10); // 天干
                    result += "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12); // 地支
                    return result;
                });
                dateString = dateString.split(' ')[0]; // 取年月日
                let g = dateString.substr(0, 2) + '年';
                let m = dateString.substring(2, dateString.match('月').index) + '月';
                let d = dateString.match(/\d+/)[0];
                d = d < 11 ? '初' + this.numberToString(d) : this.numberToString(d);
                let animals = ["猴", "鸡", "狗", "猪", "鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊"];
                let index = date.toLocaleString('zh-CN-u-ca-chinese').substr(0, 4) % 12;
                let a = animals[index];
                this.nongli = g + ' 农历' + m + d + ' 生肖:' + a;
                return {
                    g, // 干支
                    m, // 月
                    d, // 日
                    a  // 生肖
                };
            },
            numberToString(number) {
                if (number.match(/\D/) || number.length >= 14) return;
                // 数字对应中文
                let zhArray = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
                //进位填充字符，第一位是 个位，可省略
                let baseArray = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万'];
                // 把数字切割成数组并倒序排列，然后进行遍历转成中文
                let string = String(number).split('').reverse().map((item, index) => {
                    // 如果当前位为0，直接输出数字， 否则输出 数字 + 进位填充字符
                    item = Number(item) == 0 ? zhArray[Number(item)] : zhArray[Number(item)] + baseArray[index];
                    return item;
                }).reverse().join(''); // 倒叙回来数组，拼接成字符串
                string = string.replace(/^一十/, '十');  // 如果以 一十 开头，可省略一
                string = string.replace(/零+/, '零');  // 如果有多位相邻的零，只写一个即可
                return string;
            }
        }
    });

    $(function () {
        var wd = 200;
        $(".el-main").css('width', $('body').width() - wd + 'px');
    });

    //响应式页面实现根据浏览器的窗口大小变化
    window.onresize = function () {
        var wd = 200;
        $(".el-main").css("width", $("body").width() - "px");
    };
</script>

<script src="../plugins/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../plugins/AdminLTE/bower_components/raphael/raphael.min.js"></script>
<script src="../plugins/AdminLTE/bower_components/morris.js/morris.min.js"></script>
<script src="../plugins/AdminLTE/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<script src="../plugins/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/AdminLTE/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/AdminLTE/bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<script src="../plugins/AdminLTE/bower_components/moment/min/moment.min.js"></script>
<script src="../plugins/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="../plugins/AdminLTE/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="../plugins/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="../plugins/AdminLTE/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/AdminLTE/bower_components/fastclick/lib/fastclick.js"></script>
<script src="../plugins/AdminLTE/dist/js/adminlte.min.js"></script>
<script src="../plugins/AdminLTE/dist/js/pages/dashboard.js"></script>
<script src="../plugins/AdminLTE/dist/js/demo.js"></script>
</html>